<template>
  <a-modal
    title="操作"
    style="top: 100px;"
    :width="800"
    v-model="editVisible"
    @ok="handleEditOk"
    :maskClosable=false
    @cancel="cancelHandel"
    :confirmLoading="confirmLoading"
  >
    <a-form :form="editForm">
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="考评名称">
        <a-input placeholder="请填写考评名称" v-decorator="['kpjhmc',{ rules: [{ required: true, message: '请填写考评名称' }, { max: 32, message: '最多填写32位字符' }] }]" />
      </a-form-item>
      <a-form-item v-if="type === 'org'" :labelCol="labelCol" :wrapperCol="wrapperCol" label="考评单位类型" hasFeedback>
        <a-select
          placeholder="请选择考评单位类型"
          :disabled="inOrUp=='update'?'disabled':false"
          v-decorator="['dwlx', { rules: [{ required: true, message: '请选择考评单位类型' }] }]"
        >
          <a-select-option value="1">机关</a-select-option>
          <a-select-option value="2">各层级单位</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="考评周期" hasFeedback>
        <a-select
          placeholder="请选择考评周期"
          size="default"
          v-decorator="['kpzqid', { rules: [{ required: true, message: '请选择考评周期' }] }]"
        >
          <a-select-option v-for="kpzq in kpzqList" :value="kpzq.ID" :key="kpzq.ID">
            {{ kpzq.NAME }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="检查方式">
        <a-select placeholder="请选择检查方式" v-decorator="['jcfs',{ rules: [{ required: true, message: '请选择检查方式' }] }]">
          <a-select-option value="1">四不两直检查</a-select-option>
          <a-select-option value="2">定期检查</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="开始日期" hasFeedback>
        <a-date-picker format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" v-decorator="['kssj',{ rules: [{ required: true, message: '请填写开始时间' }] }]"/>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="结束日期" hasFeedback>
        <a-date-picker format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" v-decorator="['jssj',{ rules: [{ required: true, message: '请填写结束时间' }] }]"/>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="备注" hasFeedback>
        <a-textarea placeholder="请填写备注" :rows="5" v-decorator="['bz',{ rules: [{ max: 500, message: '最多填写500位字符' }] }]" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script>
import { insertPlan, insertPlanPersonnel, updatePlan, queryPeriod } from '@/api/parExamPlan'
import moment from 'moment'
export default {
  name: 'PlanItem',
  components: {
  },
  data () {
    return {
      editVisible: false,
      editForm: this.$form.createForm(this),
      inOrUp: '',
      type: '',
      confirmLoading: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      id: '',
      kpzqList: []
    }
  },
  created () {
  },
  methods: {
    begin: function (record, type) {
      this.type = type
      this.queryPeriod()
      this.inOrUp = record.inOrUp
      if (record.inOrUp === 'update') {
        this.id = record.id
        setTimeout(() => {
          this.editForm.setFieldsValue({
            kpjhmc: record.kpjhmc,
            dwlx: record.dwlx,
            jcfs: record.jcfs,
            kssj: record.kssj,
            jssj: record.jssj,
            bz: record.bz,
            kpzqid: record.kpzqid
          })
        }, 0)
      } else if (record.inOrUp === 'insert') {
        setTimeout(() => {
          this.editForm.resetFields()
        }, 0)
      }
      this.editVisible = true
    },
    queryPeriod () {
      queryPeriod({ kpzqlx: this.type === 'org' ? '1' : '2' }).then(res => {
        this.kpzqList = res.result.data
      })
    },
    /**
             * 保存
             */
    handleEditOk () {
      this.editForm.validateFields((err, values) => {
        if (!err) {
          this.confirmLoading = true
          values.kssj = moment(values.kssj, 'YYYY-MM-DD HH:mm:ss').valueOf()
          values.jssj = moment(values.jssj, 'YYYY-MM-DD HH:mm:ss').valueOf()
          if (this.inOrUp === 'insert') {
            if (this.type === 'org') {
              return insertPlan(values)
                .then(res => {
                  if (res.status === 200) {
                    this.$notification['success']({
                      message: '创建计划成功',
                      duration: 2
                    })
                    // 关闭编辑框
                    this.editVisible = false
                    // 刷新列表
                    // this.$refs.stable.refresh(true)
                    this.$emit('success')
                  } else {
                    this.$notification['error']({
                      message: res.message,
                      duration: 4
                    })
                  }
                })
                .catch(() =>
                  this.$notification['error']({
                    message: '出现异常，请联系系统管理员',
                    duration: 4
                  })
                )
                .finally(() => {
                  this.confirmLoading = false
                })
            } else {
              return insertPlanPersonnel(values)
                .then(res => {
                  if (res.status === 200) {
                    this.$notification['success']({
                      message: '创建计划成功',
                      duration: 2
                    })
                    // 关闭编辑框
                    this.editVisible = false
                    // 刷新列表
                    // this.$refs.stable.refresh(true)
                    this.$emit('success')
                  } else {
                    this.$notification['error']({
                      message: res.message,
                      duration: 4
                    })
                  }
                })
                .catch(() =>
                  this.$notification['error']({
                    message: '出现异常，请联系系统管理员',
                    duration: 4
                  })
                )
                .finally(() => {
                  this.confirmLoading = false
                })
            }
          } else if (this.inOrUp === 'update') {
            values.id = this.id
            return updatePlan(values)
              .then(res => {
                if (res.status === 200) {
                  this.$notification['success']({
                    message: '修改计划成功',
                    duration: 2
                  })
                  // 关闭编辑框
                  this.editVisible = false
                  // 刷新列表
                  // this.$refs.stable.refresh(true)
                  this.$emit('success')
                } else {
                  this.$notification['error']({
                    message: res.message,
                    duration: 4
                  })
                }
              })
              .catch(() =>
                this.$notification['error']({
                  message: '出现异常，请联系系统管理员',
                  duration: 4
                })
              )
              .finally(() => {
                this.confirmLoading = false
              })
          }
        }
      })
    },
    /**
             * 关闭弹出框
             */
    close () {
      this.editVisible = false
    },
    /**
             * 取消操作
             */
    cancelHandel () {
      this.close()
    }
  }
}
</script>
